<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 解决的问题：aysnc await解决的回调函数的问题【promise解决的是回调地狱的问题，但是依然存在回调函数】
    // 提升咱们写 异步代码的一种体验
    // 1.async修饰的方法 默认就返回一个promise
    // 2.async修饰的方法内，return出来的值  可以通过.then来获取 相当于return Promise.resolve()
    // 3.await 必须搭配async使用。await 后面通常跟的是一个Promise的异步任务。执行完这个异步任务后 才会往后执行下面的代码


    // 1.async修饰的方法 默认就返回一个promise
    // async function fn() {

    // }
    // console.log(fn())

    // 2.async修饰的方法内，return出来的值  可以通过.then来获取 相当于return Promise.resolve()
    // async function fn() {
    //   return 1
    // }
    // 上面这个写法 等价于下边这个写法
    // function fn(){
    //   return Promise.resolve(1)
    // }
    // 这种写法 仅仅拿到的是一个promise
    // const res = fn()
    // console.log(res)  
    // 获取async修饰的方法 返回的值
    // fn().then(res=>{
    //   console.log(res)
    // })


    // 3.await 必须搭配async使用。await 后面通常跟的是一个Promise的异步任务。执行完这个异步任务后 才会往后执行下面的代码
    function fn1() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(1)
        }, 3000);
      })
    }
    function fn2() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(2)
        }, 2000);
      })
    }

    async function fn() {
      console.log(0)
      const res = await fn1()
      console.log(res)
      const res2 = await fn2()
      console.log(res2)
      console.log(3)
    }

    fn()
  </script>
</body>

</html>